<template>
  <div id="shareBackFlowTop">
    <div class="search-box">
      <el-form
        ref="ruleForm"
        :inline="true"
        :model="formInline"
        :rules="rules"
        class="demo-form-inline"
      >
        <el-form-item label="统计时间" prop="createTime">
          <el-date-picker
            v-show="period === '0'"
            class="data-input"
            v-model="value0"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
            :picker-options="pickerTopDataDay"
            :clearable="false"
          >
          </el-date-picker>
          <el-date-picker
            v-show="period === '1'"
            class="data-input"
            @change="changeWeek"
            v-model="value1"
            type="week"
            format="yyyy 第 WW 周"
            value-format="yyyy-MM-dd"
            placeholder="选择周"
            :picker-options="
              fromCom === 'topData' ? pickerTopDataWeek : pickerOtherWeek
            "
            :clearable="false"
          >
          </el-date-picker>
          <el-date-picker
            v-show="period === '2'"
            class="data-input"
            v-model="value2"
            type="month"
            value-format="yyyy-MM"
            placeholder="选择月"
            :picker-options="
              fromCom === 'topData' ? pickerTopDataMon : pickerOtherMon
            "
            :clearable="false"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item class="s-btn">
          <el-button
            type="success"
            icon="el-icon-search"
            @click="toSearch('ruleForm')"
          >
            查询
          </el-button>
          <el-button type="success" plain @click="reset">
            重置
          </el-button>
        </el-form-item>
        <el-radio-group v-model="period" class="date-btn">
          <el-radio-button
            v-for="item in periodList"
            :label="item.dictValue"
            :key="item.dictValue"
          >
            {{ item.dictLabel }}</el-radio-button
          >
        </el-radio-group>
      </el-form>
    </div>
  </div>
</template>

<script>
import { sysNormalDisable } from '@utils/dictionariesFunc'
import { dateRangeMixins } from '@/mixins/dateRange'
import { getBeforDate } from '@utils/pubFunction'
import * as moment from 'moment'
export default {
  name: 'baseDataTopSearch',
  msg: '基础数据-顶部搜索',
  mixins: [dateRangeMixins],
  props: {
    formInline: {
      type: Object,
      default: function() {
        return {
          // 搜索条件
          startTime: '', // 开始时间
          endTime: '', // 结束时间
          createTime: []
        }
      }
    },
    fromCom: {
      type: String,
      default: function() {
        return ''
      }
    }
  },
  data() {
    return {
      value0: '', //日
      value1: '', //周
      value1Temp: '', //周，2021-05-17/2021-05-23
      value2: '', //月
      type: '',
      period: '',
      periodList: [],
      rules: {
        createTime: { type: 'array' }
      },
      pickerTopDataDay: {
        disabledDate(time) {
          //昨天之后不可选
          const yesterday = new Date() - 3600 * 1000 * 24 * 1
          return time.getTime() > yesterday
        }
      },
      pickerOtherDay: {
        disabledDate(time) {
          //今天之后不可选
          return time.getTime() > Date.now()
        }
      },
      pickerTopDataWeek: {
        firstDayOfWeek: 1,
        disabledDate(time) {
          //本周 && 本周之后不可选
          let m = moment().week()
          let lastWeek = moment()
            .week(m - 1)
            .endOf('week')
            .add(1, 'days')
            .valueOf()
          return time.getTime() > lastWeek
        }
      },
      pickerOtherWeek: {
        firstDayOfWeek: 1,
        disabledDate(time) {
          let endTime = ''
          let s = moment().day()
          if (s === 1) {
            //当天周一，本周不可选
            endTime = moment().day(0)
          } else {
            //当天不是周一，当天之后不可选
            endTime = moment()
          }
          return time.getTime() > endTime
        }
      },
      pickerTopDataMon: {
        disabledDate(time) {
          //本月 && 本月之后不可选
          let m = moment().month()
          let lastMon = moment()
            .month(m - 1)
            .endOf('month')
            .valueOf()
          return time.getTime() > lastMon
        }
      },
      pickerOtherMon: {
        disabledDate(time) {
          let endTime = ''
          let s = moment().date()
          if (s === 1) {
            //当天是本月1日，本月 && 本月之后不可选
            endTime = new Date() - 3600 * 1000 * 24 * 1
          } else {
            //当天不是本月1日，本月可选 、下个月不可选
            let m = moment().month()
            endTime = moment()
              .month(m)
              .endOf('month')
              .valueOf()
          }
          return time.getTime() > endTime
        }
      }
    }
  },
  watch: {
    period(newV, oldV) {
      /*切换-日/周/月，赋默认值*/
      if (newV === '0') {
        //日
        if (this.fromCom === 'topData') {
          //关键数据-获取昨天时间
          this.resetTopDay()
        } else {
          this.resetTopDay()
          //获取当天时间
          /*this.value0 = this.moment().format('YYYY-MM-DD')*/
        }
      }
      if (newV === '1') {
        //周
        if (this.fromCom === 'topData') {
          //关键数据-获取上周时间
          this.value1 = this.moment()
            .subtract(7, 'days')
            .format('YYYY-MM-DD')
          this.getRangeDate(this.value1)
        } else {
          this.resetOtherWeek()
        }
      }
      if (newV === '2') {
        //月
        if (this.fromCom === 'topData') {
          //关键数据
          this.value2 = this.getLastMon()
        } else {
          let s = moment().date()
          if (s === 1) {
            //当天是本月1日，获取上个月的时间
            this.value2 = this.getLastMon()
          } else {
            //当天不是本月1日，获取本月时间
            this.value2 = this.moment().format('YYYY-MM')
          }
        }
      }
      this.searchFunc()
    }
  },
  mounted() {
    this.getStatusList()
  },
  methods: {
    /* 获取字典状态 */
    async getStatusList() {
      this.periodList = await sysNormalDisable('backflow_kanban_period')
      if (this.fromCom === 'topData') {
        //来自关键数据
        this.resetTopDay()
      } else {
        //回流统计 || 分享统计
        this.resetOtherWeek()
      }
      // this.searchFunc()
    },
    /*关键数据-重置*/
    resetTopDay() {
      this.period = this.periodList[0].dictValue
      this.getValueDay()
    },
    /*关键数据-获取昨天日期*/
    getValueDay() {
      let { y, m, d } = getBeforDate(1)
      this.value0 = y + '-' + m + '-' + d
    },
    /* 回流统计 || 分享统计 -重置*/
    resetOtherWeek() {
      this.period = this.periodList[1].dictValue
      let s = moment().day()
      if (s === 1 || s === 0) {
        //当天周一，获取上周二的时间;当天周日，获取本周二的时间
        this.value1 = this.moment()
          .day(-5)
          .format('YYYY-MM-DD')
      } else {
        //当天不是周一，获取今天的时间
        this.value1 = this.moment().format('YYYY-MM-DD')
      }
      this.getRangeDate(this.value1)
    },
    /*获取上个月的时间-格式：年-月*/
    getLastMon() {
      let m = this.moment().month()
      let s = this.moment()
        .month(m - 1)
        .startOf('month')
        .format('YYYY-MM')
      return s
    },
    /*搜索-执行的方法*/
    searchFunc() {
      let dateType = `value${this.period === '1' ? '1Temp' : this.period}`
      //console.log('this[dateType]=' + this[dateType])
      this.$emit('toSearch', this[dateType], this.period)
    },
    /*获取周一-周日*/
    getRangeDate(e) {
      let f = 'YYYY-MM-DD'
      let m = this.moment(e, f)
      let monday = m.day(1).format(f)
      let sunday = m.day(7).format(f)
      this.value1Temp = `${monday}/${sunday}`
      //console.log('this.value1Temp=' + this.value1Temp)
    },
    //改变周
    changeWeek(e) {
      /*  console.log('改变周')
      console.log(e)*/
      this.getRangeDate(e)
    },
    /* 搜索 */
    toSearch(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.searchFunc()
        } else {
          return false
        }
      })
    },
    /* 重置 */
    reset() {
      this.$refs['ruleForm'].resetFields()
      if (this.fromCom === 'topData') {
        //来自关键数据
        this.resetTopDay()
      } else {
        this.resetOtherWeek()
      }
    }
  }
}
</script>

<style lang="less">
#shareBackFlowTop {
  .search-box {
    margin-bottom: 0 !important;
  }
  .search-box .data-input .el-input__inner {
    padding-left: 30px !important;
  }
  .el-radio-button__inner {
    padding: 8px 20px;
  }
  .date-btn {
    float: right;
    margin-right: 30px;
  }
}
</style>
